import React, { Component } from 'react'
import { Card, Row, Col } from 'antd'
import * as echarts from 'echarts';
export default class DashBoard extends Component {
  state = {
    chart1: null,
    chart2: null
  }
  render() {
    return (
      <Card title="仪表盘">
        <Row gutter={10}>
          <Col span={6}>
            <div style={{ height: 200, background: 'red' }}>
              111
            </div>
          </Col>
          <Col span={6}>
            <div style={{ height: 200, background: 'pink' }}>
              111
            </div>
          </Col>
          <Col span={6}>
            <div style={{ height: 200, background: 'skyblue' }}>
              111
            </div>
          </Col>
          <Col span={6}>
            <div style={{ height: 200, background: 'purple' }}>
              111
            </div>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <div id="chart1" style={{ height: 600 }}>111</div>
          </Col>
          <Col span={12}>
            <div id="chart2" style={{ height: 600,overflow:'hidden' }}>222</div>
          </Col>
        </Row>
      </Card>
    )
  };
  componentDidMount() {
    this.initChart1()
    this.initChart2()
  };
  initChart2 = () => {
    const chart2 = echarts.init(document.getElementById('chart2'));
    chart2.setOption({
      backgroundColor: '#273454',
      color: ['#FF9966', '#FFFFCC', '#0099CC', '#99CC33', '#99CCCC'],
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}$ ({d}%)",
        textStyle: {
          fontSize: 15,
        },
      },
      legend: {
        data: ['A', 'B', 'C', 'D', 'E'],
        orient: 'vertical',
        right: '5%',
        top: '13%',
        top: 'center',
        itemWidth: 20,
        itemHeight: 20,
        itemGap: 30,
        textStyle: {
          color: '#',
          fontSize: 16,
        },
      },
      series: [{
        name: 'TITLE',
        type: 'pie',
        clockwise: false,
        startAngle: 90,
        radius: '35%',
        center: ['44%', '50%'],
        hoverAnimation: false,
        roseType: 'radius', //area
        data: [{
          value: 335,
          name: 'A'
        },
        {
          value: 310,
          name: 'B'
        },
        {
          value: 234,
          name: 'C'
        },
        {
          value: 135,
          name: 'D'
        },
        {
          value: 148,
          name: 'E'
        }
        ],
        itemStyle: {
          normal: {
            borderColor: '#273454',
            borderWidth: '5',
          },
        },
        label: {
          show: true,
          position: 'outside',
          formatter: '{a|{b}：{d}%}\n{hr|}',
          rich: {
            hr: {
              backgroundColor: 't',
              borderRadius: 100,
              width: 0,
              height: 10,
              padding: [3, 3, 0, -16],
              shadowColor: '#1c1b3a',
              shadowBlur: 1,
              shadowOffsetX: '0',
              shadowOffsetY: '2',
            },
            a: {
              padding: [-35, 15, -20, 5],
            }
          }
        },
        labelLine: {
          normal: {
            length: 20,
            length2: 30,
            lineStyle: {
              width: 1,
            }
          }
        },
      }],
    });
    this.setState({
      chart2
    })
  };
  initChart1 = () => {
    const chart1 = echarts.init(document.getElementById('chart1'));
    // 绘制图表
    chart1.setOption({
      title: {
        text: '商品销售走势'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          label: {
            show: true,
            formatter: '{c}'
          },
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '利润',
          type: 'line',
          data: [23, 40, 36, 56, 8, 45],
          label: {
            show: true,
            formatter: '{c}'
          }
        }
      ]
    });
    this.setState({
      chart1
    })
  }
}
